<script lang="ts">
  import { selectCmsOrderPage } from "../api/index";
  import Pagination from "../components/Pagination.svelte";
    // import PieChart from "../components/PieChart.svelte";
  import DeviceList from '../components/DeviceList.svelte'
  import DeviceProgressBars from '../components/DeviceProgressBars.svelte'
  import Title from '../components/Title.svelte'
  import { onMount } from "svelte";
  import Card from '../components/card.svelte'
  import Table from '../components/table.svelte'
  
  let services: any[] = [];
  let formData = {
    ypageNum: 1,
    ypageSize: 12,
    endTime: '',
    total: 0,
    mobile: '',
  }

  export let pageData: Record<string, any> = {};
 
  onMount(() => {
 
  });

  let showDialog = false;

  const handleClick = (service: Service) => {
    console.log(service);
    showDialog = true;
  };

</script>

<div
  class="flex flex-col justify-between h-[100%] left-chart bg-[rgb(2,17,32,0.2)]"
>
<div style="height: 30%; flex-shrink: 0; margin-bottom: 10px;">
  <Card>
    <Title title="设备数量" />
    <div class="flex justify-around mt-6 mb-6">
      <DeviceProgressBars pageData={pageData} />
    </div>
  </Card>
</div> 
<div style="flex: 1;">
  <Card>
    <Title title="新增订单" />
    <Table />
  </Card>
</div>

  <!-- 分页 -->
  <!-- <Pagination total={formData.total} pageSize={formData.ypageSize} currentPage={formData.ypageNum} onPageChange={handlePageChange} /> -->
</div>

<style>
  .dialog {
    font-size: 12px;
  }
  .thead {
    background: linear-gradient(180deg, #112444 0%, rgba(0, 11, 32, 0.6) 100%);
  }
  .table-tr {
    /* 先定义虚线，再定义背景色 */
    background-image: linear-gradient(to right, #263452 8px, transparent 8px),
      linear-gradient(to bottom, rgba(9, 20, 47, 0.6), rgba(9, 20, 47, 0.6));
    background-size:
      24px 1px,
      /* 虚线的尺寸 */ 100% 100%; /* 背景色铺满 */
    background-repeat: repeat-x, no-repeat;
    background-position:
      0 bottom,
      0 0;
    padding-bottom: 1px;
  }
  .table-tr:hover {
    background-color: rgba(9, 20, 47, 0.6);
  }
</style>
